<style lang="scss" scoped>
.invitation-main-img {
	height: R(500);
	margin-bottom: -90px;
	position: relative;
	z-index: 0;
}
.invitation-main-content {
	background-color: #fff;
	margin: 20px;
	border-radius: 15px;
	position: relative;
	z-index: 0;
}
.invitation-main-content-title {
	font-weight: 600;
	text-align: center;
	padding-top: 15px;
	font-size: 18px;
}
.invitation-main /deep/ .u-field__left-icon {
	/* margin-top: 8px; */
}
.invitation-main /deep/ .button--default {
	border: 1px solid #fff;
	color: $themeColor;
}
.register-btn {
	margin: 0.1rem 0.3rem 0.3rem;
	/* padding-top: 20px; */
}
.register-bottom {
	text-align: center;
	font-size: 18px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.register-bottom span {
	color: $themeColor;
}
.u-cell-item {
	width: 95%;
}
.dialog-main {
	position: relative;
	width: 600upx;
	height: 350upx;
}

.dialog-main-icon {
	position: absolute;
	height: 110px;
	width: 110px;
	background-size: cover;
	background-image: url(../../../common/images/regist-icon.png);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
.dialog-main-content {
	text-align: center;
}
.dialog-main-title {
	color: #128de3;
	font-size: R(40px);
}
.dialog-main-btn {
	padding: 6px;
	margin: 20px 30px 0;
	border-radius: 50px;
	color: #fff;
	background-color: #128de3;
}
.invitation-code /deep/ .u-field__label {
	text-align: center;
	margin-top: 10px;
}
.register-agreement-main {
	padding: 20px;
}
.register-agreement-checkbox {
	display: flex;
}
.register-agreement-tight {
	color: $themeColor;
}
</style>
<template>
	<div class="invitation-main">
		<image class="invitation-main-img" :src="require('@/common/images/registered.png')" alt="" />

		<div class="invitation-main-content">
			<div class="invitation-main-content-title">注册账号</div>
			<div style="padding:0 30rpx">
				<u-form :model="form" ref="uForm">
					<u-form-item left-icon="account-fill"><u-input :maxlength="15" type="number" placeholder="请输入手机账号" v-model="costomData.linkMobile" /></u-form-item>

					<u-form-item left-icon="lock-fill"><u-input :maxlength="20" type="passwd" placeholder="请输入登录密码" v-model="costomData.passwd" /></u-form-item>
					<u-form-item left-icon="grid"><u-input :maxlength="20" type="text" placeholder="请输入真实姓名" v-model="costomData.linkMan" /></u-form-item>
					<u-form-item left-icon="order" v-if="!invitationCodeFlag">
						<u-input :maxlength="20" type="text" placeholder="请输入推广人编号(选填)" v-model="costomData.recomUserNo" />
					</u-form-item>

					<u-form-item left-icon="file-text-fill" v-if="!invitationCodeFlag">
						<u-input clearable :maxlength="15" type="text" placeholder="请输入邀请码" v-model="costomData.invitationCode" />
					</u-form-item>
					<u-form-item left-icon="bell-fill">
						<u-input :maxlength="6" type="number" placeholder="请输入短信验证码" v-model="costomData.smsCode" />
						<view class="get-code-btn" slot="right" size="mini" @click="sendSmsCode">{{ sms.smsTitle }}</view>
					</u-form-item>
				</u-form>
			</div>
			<div class="register-agreement-main">
				<u-checkbox v-model="agreementChecked" shape="circle">我同意</u-checkbox>
				<text class="register-agreement-tight" @click="handleAgreement">《收款宝展业版注册服务协议》</text>
				<!-- <van-checkbox v-model="agreementChecked" >
          <div class="register-agreement-checkbox">
            <div class="register-agreement-left">我同意</div>
            
          </div>
        </van-checkbox> -->
			</div>

			<div class="register-btn"><button class="myBtn" @click="handleRegistered">立刻注册</button></div>

			<div class="register-bottom" @click.stop="toLoginHandle">
				已注册用户，
				<span>下载应用</span>
			</div>

			<u-popup v-model="dialog.show" mode="center" :mask-close-able="false" :showConfirmButton="false" :border-radius="20" height="600">
				<div class="dialog-main"><div class="dialog-main-icon"></div></div>
				<div class="dialog-main-content">
					<div class="dialog-main-title">恭喜您注册成功</div>
					<div class="dialog-main-btn" @click="toLoginHandle()">立即下载</div>
				</div>
			</u-popup>
		</div>
	</div>
</template>

<script>
import { sendVerifyCode } from '_a/sms';
import { inviteAgent } from '_a/invitation';
import { isCheckPassword, isMobile } from '_c/utils/validate';
export default {
	name: 'InvitationRegistered',
	components: {},
	data() {
		return {
			sms: {
				smsTitle: '获取验证码',
				smsNum: 59,
				disabled: false,
				time: null
			},
			costomData: {
				invitationCode: '',
				smsCode: '',
				linkMobile: '',
				passwd: '',
				type: '2'
			},
			dialog: {
				show: false
			},
			invitationCodeFlag: false,
			agreementChecked: false,
			form: {}
		};
	},
	onShow() {
		// #ifdef MP-WEIXIN
		uni.hideHomeButton();
		// #endif
	},
	onLoad(option) {
		console.log(option);
		if (option.invitationCode) {
			this.costomData.invitationCode = option.invitationCode;
			this.costomData.recomUserNo = option.recomUserNo;
			this.invitationCodeFlag = true;
		}
		// if (this.$route.query.type) {
		//   this.costomData.type = this.$route.query.type;
		// }
	},
	methods: {
		toLoginHandle() {
			this.$router.push({
				path: '/pages/home/invitation/down-app'
			});
			/** 返回登录 **/
			// this.$nav.redirect({ path: '/pages/login/index' });
		},
		handleRegistered() {
			let message = '';
			if (!this.agreementChecked) {
				message = '请阅读并勾选协议';
			}
			if (isCheckPassword(this.costomData.smsCode)) {
				message = '验证码为6位数';
			}
			if (!this.costomData.smsCode) {
				message = '请输入短信验证码';
			}
			if (!this.costomData.invitationCode) {
				message = '请输入邀请码';
			}
			if (isCheckPassword(this.costomData.passwd)) {
				message = '密码不能小于6位数';
			}
			if (!this.costomData.passwd) {
				message = '请输入登录密码';
			}
			if (!this.costomData.linkMan) {
				message = '请输入真实姓名';
			}
			let bool = isMobile(this.costomData.linkMobile);
			console.log('bool', bool);
			if (bool) {
				if (bool.isShow) {
					message = bool.text;
				} else {
					message = '手机号格式不正确';
				}
			}
			if (!this.costomData.linkMobile) {
				message = '请输入手机账号';
			}
			if (message) {
				this.$tip.toast(message);
				return false;
			}

			this.$tip.loading('注册中....');
			/** 立即注册 **/
			inviteAgent(this.costomData)
				.then(res => {
					this.$tip.loaded();
					if (res.code === 200) {
						// this.$store.commit('SET_TOKEN', res.data.token.token)
						// this.$store.commit('SET_USER_INFO', res.data.userInfo)
						this.dialog.show = true;
					}
				})
				.catch(err => {
					this.$tip.loaded();
				});
		},
		sendSmsCode() {
			if (this.costomData.linkMobile) {
				let message2 = '';

				// if (isMobile(this.costomData.linkMobile)) {
				//   message2 = "手机号格式不正确";
				// }
				let bool = isMobile(this.costomData.linkMobile);
				if (bool) {
					if (bool.isShow) {
						message2 = bool.text;
					} else {
						message2 = '手机号格式不正确';
					}
				}
				if (!this.costomData.linkMobile) {
					message2 = '请输入手机账号';
				}
				if (message2) {
					this.$tip.toast(message2);

					return false;
				}
				this.sms.disabled = true;
				/** 发送短信 **/

				sendVerifyCode({ phone: this.costomData.linkMobile })
					.then(res => {
						if (res.code === 200) {
							this.sms.smsTitle = this.sms.smsNum + 's';
							this.smsCountdown();
						} else {
							this.sms.disabled = false;
							this.sms.smsNum = 59;
							this.sms.smsTitle = '重新发送';
						}
					})
					.catch(err => {
						this.sms.disabled = false;
						this.sms.smsNum = 59;
						this.sms.smsTitle = '重新发送';
					});
			} else {
				this.$tip.toast('请输入手机账号');
			}
		},
		smsCountdown() {
			/** 短信倒计时 **/
			const timeFunction = () => {
				this.sms.smsNum--;
				this.sms.smsTitle = this.sms.smsNum + '秒';
				/** 当时间差小于等于0时,停止倒计时 **/
				if (this.sms.smsNum <= 0) {
					this.sms.smsTitle = '重新发送';
					this.sms.disabled = false;
					this.sms.smsNum = 59;
					clearInterval(this.sms.time);
				}
			};
			/** 每一秒执行一次 **/
			const go = setInterval(() => {
				timeFunction();
			}, 1000);
			this.sms.time = go;
		},
		areaConfirm(value) {
			this.costomData.province = value[0].name;
			this.costomData.city = value[1].name;
			this.costomData.region = value[2].name;
			this.popupShow = false;
		},
		goLogin() {
			this.dialog.show = false;
		},
		dialogClose() {
			this.$nav.push({
				name: 'login'
			});
		},
		handleAgreement() {
			/** 协议 **/
			this.$nav.push({
				name: '/pages/login/agreement/index',
				query: {
					invitationCode: this.costomData.invitationCode,
					type: this.costomData.type,
					pageType: 'reg'
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.get-code-btn {
	background: linear-gradient(to right, $themeColor, $themeColor);
	border: $themeColor;
	color: white;
	padding: 0 20upx;
	border-radius: 30upx;
	height: 50upx;
	line-height: 50upx;
	font-size: 26upx;
}
</style>
